<script setup lang="ts"></script>

<template>
    <view class="my-info">
        <wxTopStatus backgroundColor="#fff">
            <view class="nav-title"> 个人信息 </view>
        </wxTopStatus>
        <view class="p-[30rpx]">
            <view class="my-info-box flex-column gap-[20rpx]">
                <view class="box-item flex-between">
                    <view class="item-left"> 头像 </view>
                    <view class="item-right flex-row-center gap-[10rpx]" @click="changeAvatar">
                        <fui-avatar size="small" :src="info.avatar">
                            <!--                            <fui-icon name="my-fill" color="#fff"></fui-icon>-->
                        </fui-avatar>
                        <image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image>
                    </view>
                </view>

                <view class="box-item flex-between">
                    <view class="item-left"> 昵称 </view>
                    <view class="item-right flex-row-center gap-[10rpx]">
                        <fui-input
                            :padding="[0, 0]"
                            v-model="info.nickname"
                            textAlign="right"
                            size="26"
                            placeholder="请输入昵称"
                            :borderBottom="false"
                        ></fui-input>
                        <image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image>
                    </view>
                </view>

                <view class="box-item flex-between">
                    <view class="item-left"> 手机号 </view>
                    <view class="item-right flex-row-center gap-[10rpx]">
                        <fui-input
                            :padding="[0, 0]"
                            v-model="info.phone"
                            textAlign="right"
                            size="26"
                            placeholder="请输入手机号"
                            :borderBottom="false"
                        ></fui-input>
                        <image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image>
                    </view>
                </view>

                <view class="box-item flex-between">
                    <view class="item-left"> 姓名 </view>
                    <view class="item-right flex-row-center gap-[10rpx]">
                        {{ info.name }}
                        <image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image>
                    </view>
                </view>

                <view class="box-item flex-between">
                    <view class="item-left"> 身份证实名 </view>
                    <view class="item-right flex-row-center gap-[10rpx]">
                        {{ info.idNumber }}
                        <image mode="widthFix" :src="$getImg('/img/common/toRight.png')"></image>
                    </view>
                </view>

                <view class="box-item flex-column gap-[10rpx]">
                    <view class="item-left"> 个人简介 <text class="desc">200字以内</text> </view>
                    <fui-textarea
                        :borderTop="false"
                        :borderBottom="false"
                        placeholder="请输入个人简介"
                        v-model="info.intro"
                        size="26"
                        :padding="[0, 0]"
                        :isCounter="true"
                        maxlength="200"
                    ></fui-textarea>
                </view>
            </view>
        </view>

        <view class="btn flex-center" @click="submit"> 修改个人信息 </view>
    </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/stores/user'
import upload from '@/utils/uploadFile'
import { userEdit } from '@/api/user'

const userStore = useUserStore()

console.log('userStore', userStore.userInfo)
const info = ref(JSON.parse(JSON.stringify(userStore.userInfo)))

const changeAvatar = () => {
    // 更换头像
    uni.chooseImage({
        count: 1,
        success: (res) => {
            const imgFile = res.tempFilePaths
            console.log(imgFile)

            upload(imgFile[0])
                .then((res: any) => {
                    console.log(23232, res)
                    if (res.code === 0) {
                        info.value.avatar = res.data.url
                    }
                    // uploadFn(res.data.url, 'pics')
                })
                .catch((err) => {
                    console.log('失败', err)
                })
        },
        fail: (err) => {
            console.log(err)
        }
    })
}

const submit = async () => {
    const { avatar, nickname, phone, intro } = info.value
    const res = await userEdit({
        avatar,
        nickname,
        phone,
        intro
    })

    if (res.code === 0) {
        uni.showToast({
            title: '修改成功',
            icon: 'none'
        })

        console.log('修改成功')
        const t = setTimeout(() => {
            clearTimeout(t)
            userStore.getUser()
            uni.navigateBack()
        }, 1000)
    }
}
</script>

<style scoped lang="scss">
.nav-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}
.my-info {
    height: 100vh;
    background-color: #f6f6f6;
    .my-info-box {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        .box-item {
            min-height: 80rpx;
            .item-right {
                image {
                    width: 10rpx;
                }
            }

            .desc {
                color: #999999;
                font-size: 11px;
            }
        }
    }
}

.btn {
    border-radius: 999rpx;
    background: linear-gradient(98deg, #376af7 14%, #40a9ff 83%);
    padding: 30rpx;
    margin: 30rpx;
    color: #fff;
    font-size: 14px;
}
</style>
